<template>
    <div class="channel-edit">
        <van-cell :border="false">
            <div slot="title" class="title-text">我的频道</div>
            <van-button slot="default" plain type="danger" round
            size="mini" class="edit-btn"
            @click = "edit= !edit">{{edit?"保存":"编辑"}}</van-button>
        </van-cell>
        <van-grid  class="my-grid" :gutter="10">
          <van-grid-item class="grid-item"
          v-for="(channel ,ind) in channels" :key="ind"
          @click="onUserChannelClick(channel, ind)"
           >
           <van-icon slot="icon"  v-if="edit && channel.name !== '推荐'"  name="clear" />
            <span slot="text" class="text" :class="{active: ind === activeIndex }">{{ channel.name }}</span>
          </van-grid-item>
        </van-grid>

        <van-cell :border="false">
            <div slot="title" class="title-text">频道推荐</div>
        </van-cell>
        <van-grid   class="recommend-grid" :gutter="10">
          <van-grid-item class="grid-item" v-for="value in recommendChannels"
          :key="value.id"  icon="plus" :text="value.name"
          @click="addChannel(value)"
          />
        </van-grid>

    </div>
  </template>

<script>
import { getAllChannels } from '@/api/channel.js'
import { mapState } from 'vuex'
import { addUserChannel, deleteUserChannel } from '@/api/user.js'
import { setItem } from '@/utils/localStorage'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      edit: false,
      allChannels: [],
      address: '湖北省随州市'

    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      return this.allChannels.filter(item => {
        return this.channels.findIndex(channel => channel.id === item.id) === -1
      })
    }
  },
  watch: {},
  created () {
    this.loadChannels()
  },
  mounted () {},
  methods: {
    check () {
      // 弹出层在关闭前要做的善后工作
      this.edit = false
      window.console.log('edit:' + this.edit)
    },
    async deleteChannel (channel) {
      try {
        if (this.user) {
          // 已登录，将数据存储到线上
          await deleteUserChannel(channel.id)
        } else {
          // 未登录，将数据存储到本地
          setItem('channles', this.channels)
        }
      } catch (err) {
        console.log(err)
        this.$toast('删除频道失败，请稍后重试')
      }
    },
    onUserChannelClick (channel, ind) {
      if (this.edit) {
        if (channel.name === '推荐') {
          return
        }
        // 此处做弹窗提醒
        this.$dialog.confirm({
          title: `确定要删除频道 ${channel.name} 吗？`

        }).then(() => {
          if (ind <= this.activeIndex) {
            this.$emit('updateActive', this.activeIndex - 1)
          }
          this.channels.splice(ind, 1)
          this.deleteChannel(channel)
        }).catch(() => {
          window.console.log('维持原样')
        })
      } else {
        // 切换组件
        this.$emit('updateActive', ind)
        this.$emit('colsePopup')
      }
    },
    async addChannel (channel) {
      this.channels.push(channel)
      //
      if (this.user) {
        await addUserChannel([{
          id: channel.id, // 频道 id
          seq: this.channels.length // 频道的 序号
        }])
      } else {
        setItem('channles', this.channels)
      }
    },
    async loadChannels () {
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('allChannels数据获取失败')
        window.console.log(err)
      }
    }
  }
}
</script>

  <style scoped lang="less">

.channel-edit{

    padding-top: 85px;

    .title-text{
        font-size: 32px;
        color: #333333;
    }
    .edit-btn{
        width: 104px ;
        height: 48px;
        color: #f85959 ;
        font-size: 22px;
        border: 1px solid #f85959;
    }

    /deep/ .grid-item{
        width: 160px ;
        height: 86px;
        .van-grid-item__content{
            white-space: nowrap;
            background-color: #f4f5f6;
            font-size: 26px;
            color: #222;
            .active{
              color: red;
            }

        }

    }

    /deep/ .my-grid {
            .grid-item {
              .van-grid-item__content{
                .van-grid-item__text{
                margin-top: 0;
                }
                .van-grid-item__icon-wrapper{
                    position: absolute;
                    right: -10px;
                    top:-10px;
                    font-size: 40px;
                    color: #cacaca;
                    z-index: 2;
            }

              }

            }

        }

    /deep/ .recommend-grid{

        .grid-item{

            .van-grid-item__content{
                flex-direction: row;
                .van-icon-plus{
                    font-size: 28px;
                    margin-right: 6px;
                }
                .van-grid-item__text{
                margin-top: 0;
                font-size: 26px;
                color: #222;
            }
            }
        }

    }

}
</style>
